<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript实现的具有手拉风琴效果的横向焦点图片轮换</title>
<style type="text/css">
* {padding: 0; margin: 0; }
li {ist-style: none; }
body {background: #f6f9fc; }
#demo {
	width: 615px;
	height: 254px;
	border: 1px solid #ccc;
	margin: 5px auto 0;
	overflow: hidden;
}
.indemo {
	width: 3300px;
	height: 254px;
}
.indemo li{
	width: 22px;
	height: 254px;
	float: left;
	position: relative;
	overflow: hidden;
}
.indemo li.active {
	width: 550px;
}
.indemo span {
	width: 21px;
	height: 244px;
	padding-top: 10px;
	border-right: 1px solid #fff;
	position: absolute;
	top: 0;
	right: 0;
	color: #000;
	text-align: center;
	cursor: pointer;
	font: 12px "宋体";
}
.indemo img {
	width: 550px;
	height: 254px;
}
.bg0 { background: #00FFCC; }
.bg1 { background: #7c0070; }
.bg2 { background: #3d7fbb; }
.bg3 { background: #5ca716; }
</style>
</head>
<body >

<div id="demo">
  <ul class="indemo">
    <li class="active">
        <span class="bg0">第一幅图片展示</span><img src="images/img01.jpg" />
    </li>
    <li><span class="bg1">第二幅图片展示</span><img src="images/img02.jpg" /></li>
    <li><span class="bg2">第三幅图片展示</span><img src="images/img03.jpg" /></li>
    <li><span class="bg3">第四幅图片展示</span><img src="images/img04.jpg" /></li>    
  </ul>
</div>

<script type="text/javascript">
window.onload=function ()
{
  createAccordion('demo');
};

function createAccordion(id)
{
  var oDiv=document.getElementById(id);
  var iMinWidth=999;
  var aLi=oDiv.getElementsByTagName('li');
  var aSpan=oDiv.getElementsByTagName('span');
  var i=0;
  oDiv.timer=null;
  for(i=0;i<aSpan.length;i++)
  {
	aSpan[i].index=i;
	iMinWidth=Math.min(iMinWidth, aLi[i].offsetWidth);
	aSpan[i].onclick=function()
	{
	  gotoImg(oDiv, this.index, iMinWidth);
	};		
  }
};

function gotoImg(oDiv, iIndex, iMinWidth)
{
  if(oDiv.timer)
  {
	clearInterval(oDiv.timer);
  }
  oDiv.timer=setInterval(function (){
	changeWidthInner(oDiv, iIndex, iMinWidth);
  }, 30 );
}

function changeWidthInner(oDiv, iIndex, iMinWidth)
{
  var aLi=oDiv.getElementsByTagName('li');
  var aSpan=oDiv.getElementsByTagName('span');
  var iWidth=oDiv.offsetWidth;
  var w=0;
  var bEnd=true;
  var i=0;
  for(i=0;i<aLi.length;i++)
  {
	if(i==iIndex)
	{
	  continue;
	}	
	if(iMinWidth==aLi[i].offsetWidth)
	{
	  iWidth-=iMinWidth;
	  continue;
	}
	bEnd=false;
	speed=Math.ceil((aLi[i].offsetWidth-iMinWidth)/10);
	w=aLi[i].offsetWidth-speed;
	if(w<=iMinWidth)
	{
	  w=iMinWidth;
	}
	aLi[i].style.width=w+'px';
	iWidth-=w;
  }
  aLi[iIndex].style.width=iWidth+'px';  
  if(bEnd)
  {
	clearInterval(oDiv.timer);
	oDiv.timer=null;
  }
}
</script>
</body>
</html>
